<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.min.js" language="javascript" type="text/javascript"></script>
<script src="js/jquery.tab.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {

        $(".icon-double-angle-left").click(function() {

            $(".sidebar").toggleClass("menu-min");

        });
		$(".dropdown-toggle").click(function() {

            $(this).parent().toggleClass("active").siblings().removeClass("active");

        })

        $("#sidebar").tab({

            tabId: ".sidebar-shortcuts-large",
            tabTag: "button",
            conId: "#sidebar .bd",
            conTag: ".nav-list"
        });

        $("#sidebar").tab({

            tabId: ".sidebar-shortcuts-mini",
            tabTag: "span",
            conId: "#sidebar .bd",
            conTag: ".nav-list"
        });

    })
</script>
</head>

<body>
<div id="sidebar" class="sidebar">
  <div class="sidebar-shortcuts-large">
    <button class="btn btn-small btn-success"><i class="icon-1"></i></button>
    <button class="btn btn-small btn-warning"><i class="icon-3" ></i></button>
    <button class="btn btn-small btn-danger"><i class="icon-4"></i></button>
  </div>
  <div class="sidebar-shortcuts-mini"> <span class="btn btn-success"></span> <span class="btn btn-info"></span> <span class="btn btn-warning"></span> <span class="btn btn-danger"></span> </div>
  <div class="bd">
    <ul class="nav nav-list">
           <li> <a href="#" class="dropdown-toggle"> <i class="icon-1"></i> <span class="menu-text">个人办公</span> <b class="arrow icon-angle-down"></b> </a>
           <ul class="submenu">
           <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
           <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
           <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
           <li> <a href="#" class="dropdown-toggle"> <i class="icon-double-angle-right"></i>个人办公2<b class="arrow icon-angle-down"></b> </a>
           <ul class="submenu">
              <li> <a href="#">个人办公3</a> </li>
           </ul>
          </li>
        </ul>
      </li>
      <li class="active"> <a href="#"> <i class="icon-2"></i> <span class="menu-text">我的绩效</span> </a> </li>
      <li> <a href="#"> <i class="icon-3"></i> <span class="menu-text">个人中心</span> </a> </li>
      <li> <a href="#"> <i class="icon-4"></i> <span class="menu-text">公共信息</span> </a> </li>
    </ul>

  </div>
  
  <!--/.nav-list-->
  
  <div class="sidebar-collapse" id="sidebar-collapse"> <i class="icon-double-angle-left"></i> </div>
</div>
</body>
</html>
